<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="/js/axios-interceptor.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="login-box">
        <div class="login-text">
            登 录
            <br>
            <span>欢迎使用黑马软件</span>
        </div>
        <el-form
                :model="loginForm"
                ref="loginFormRef"
                :rules="loginFormRules"
        >
            <el-form-item prop="username">
                <el-input
                        v-model="loginForm.username"
                        prefix-icon="el-icon-user-solid"
                        placeholder="请输入用户名或学号"
                        @input="change($event)"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        show-password
                        v-model="loginForm.password"
                        prefix-icon="el-icon-unlock"
                        placeholder="请输入密码【默认123456】"
                        @input="change($event)"
                ></el-input>
            </el-form-item>
            <el-form-item class="btns">
                <el-button
                        type="primary"
                        @click="handleLoginForm"
                >登录
                </el-button>
                <el-button
                        type="primary"
                        @click="loginFormReset"
                >重置
                </el-button>
            </el-form-item>
        </el-form>
        <div style="text-align: center;color:red">{{loginMsg}}</div>
    </div>





</div>

<script>
    let vue = new Vue({
        el: "#container",
        data: {
            loginMsg:"",
            formLabelWidth: '120px',
            userInfo:{},
            dialogFormVisible:true,
            // 登录表单数据对象
            loginForm: {
                username: '',
                password: ''
            },
            success: 2,
            // 登录表单的校验对象
            loginFormRules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 2, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
                ]
            }
        },
        computed: {
            status: function () {
                if (this.success ==  1) {
                    return '登录成功';
                } else if (this.success == 0) {
                    return '登录失败';
                } else {
                    return '';
                }
            }
        },
        methods: {
            // 多层嵌套无法输入解决方法
            change(e) {
                this.$forceUpdate();
                this.success = 2;
            },
            // 表单重置方法
            loginFormReset() {
                this.$refs.loginFormRef.resetFields();
                this.success = 2;
            },
            // 登录方法
            handleLoginForm() {
                const ua = navigator.userAgent;
                const isPhone = /(iPhone|iPad|iPod|iOS|Android)/i.test(ua);
                if(isPhone){
                    alert("请使用电脑操作！！");
                    return;
                };

                this.$refs.loginFormRef.validate(valid => {
                    if (!valid) return
                    let _this = this;
                    axios.post("/login", "username="+this.loginForm.username
                        +"&password="+this.loginForm.password).then((res) => {
                        if (res.data.flag) {
                            _this.loginMsg="";
                            localStorage.setItem("name", res.data.name);
                            window.location.href = "index.html";
                        }else {
                            _this.loginMsg="用户名或密码错误！";
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
                });

            }
        }
    });
</script>
<style lang="less" scoped>
    html, body {
        margin: 0;
        padding: 0;
        background: url("image/logo.jpg") no-repeat;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: absolute;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    .login-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        transform: translate(-50%, -50%);
        border: 1px solid #cccccc;
        border-radius: 5px;
        background: rgba(255, 255, 255, .9);
    }

    .login-text {
        width: 100%;
        font-size: 24px;
        text-align: center;
        color: #2f82fe;
        margin-bottom: 50px;
        box-sizing: border-box;
        padding: 20px;
    }

    .el-form-item {
        width: 90%;
        margin: 20px auto;
    }

    .login-text span {
        line-height: 30px;
        font-size: 18px;
        color: #666666;
    }

    .btns {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }
</style>
</body>
</html>
